<template>
  <div class="row mb-3" v-loading="loading">
    <div class="col-sm-4" v-for="(item, index) in list" :key="index">
      <panel-statistic-item :statistic-data="item"></panel-statistic-item>
    </div>
    <div class="col-sm-4">
      <panel-statistic-item :statistic-data="agencyData"></panel-statistic-item>
    </div>

    <gov-agency-dialog
      :visible.sync="govAgencyVisible"
      table-name="credit_agency_gov_view"
    ></gov-agency-dialog>
    <credit-agency-dialog :visible.sync="creditAgencyVisible"></credit-agency-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import PanelStatisticItem from '@/credit/views/city/index/PanelStatisticItem'
import GovAgencyDialog from '@/bank/views/index/GovAgencyDialog'
import CreditAgencyDialog from '@/gov/views/index/CreditAgencyDialog.vue'
import { add } from '@vimi/utils-tool'

export default {
  components: {
    PanelStatisticItem,
    GovAgencyDialog,
    CreditAgencyDialog,
  },
  props: {},
  data() {
    return {
      loading: false,
      bankTotal: {},
      govAgencyVisible: false,
      creditAgencyVisible: false,
    }
  },
  computed: {
    ...mapGetters(['user', 'userId', 'govAgencyTotal', 'creditAgencyTotal', 'taskCountHnd']),
    agencyData() {
      return {
        name: '合作机构数',
        num: this.govAgencyTotal + this.creditAgencyTotal,
        icon: 'fa-briefcase',
        color: '#34bfa3',
        child: [
          { name: '政府机构：', num: this.govAgencyTotal, onClick: this.openGovAgency },
          { name: '担保机构：', num: this.creditAgencyTotal, onClick: this.openCreditAgency },
        ],
      }
    },
    list() {
      const total = add(
        this.bankTotal.claim_no_total,
        this.bankTotal.claim_yes_total,
        this.bankTotal.loan_in_gua_total,
        this.bankTotal.loan_un_gua_total,
        this.getValue('p4'),
        this.getValue('p'),
        this.getValue('p11'),
        this.getValue('p12')
      )
      const funds = add(
        this.bankTotal.loan_in_gua_funds,
        this.getValue('p14'),
        this.bankTotal.loan_un_gua_funds,
        this.getValue('p16')
      )
      return [
        {
          name: '累计项目数',
          num: total,
          icon: 'fa-users',
          color: '#42bd56',
          child: [
            { name: '未受理：', num: add(this.bankTotal.claim_no_total) },
            { name: '已受理：', num: add(this.bankTotal.claim_yes_total, this.getValue('p')) },
            { name: '在保：', num: add(this.bankTotal.loan_in_gua_total, this.getValue('p12')) },
            { name: '解保：', num: add(this.bankTotal.loan_un_gua_total, this.getValue('p14')) },
          ],
        },
        {
          name: '在保余额（万元）',
          num: add(this.bankTotal.loan_in_gua_funds, this.getValue('p16')),
          icon: 'fa-cny',
          color: '#f4516f',
          child: [
            { name: '累积保额：', num: funds },
            {
              name: '已解保额：',
              num: add(this.bankTotal.loan_un_gua_funds, this.getValue('p18')),
            },
          ],
        },
      ]
    },
  },
  watch: {},
  created() {
    this.$store.dispatch('getTaskCountHnd')
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      this.loading = true
      let [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, 'credit_project_total_bank_view', {
          'user_id.eq': this.userId,
        })
      )
      this.loading = false

      this.bankTotal = (res && res.data && res.data.length && res.data[0]) || {}
    },
    getValue(key) {
      const data = (this.taskCountHnd && this.taskCountHnd[0]) || {}
      return data[key]
    },
    openGovAgency() {
      this.govAgencyVisible = true
    },
    openCreditAgency() {
      this.creditAgencyVisible = true
    },
  },
}
</script>
<style scoped lang="scss"></style>
